<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Result report: Subpage</title>
    <link rel="icon" href="favicon.png" />
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- DataTables CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css"
    />

    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

    <!-- Optional Extensions (e.g., Buttons, Responsive) -->
    <link
      rel="stylesheet"
      href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css"
    />
    <script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.datatables.net/responsive/2.3.0/css/responsive.dataTables.min.css"
    />
    <script src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>

    <script type="text/javascript">
      console.log("js ready");
      $(document).ready(function () {
        // Initialize the summary table
        $("#summaryTable").DataTable({
          ajax: "html_tables/table_LPO.json",
          processing: true,
          deferRender: true,
          paging: true,
          pageLength: 50,
          scrollY: "500px",
          scrollCollapse: true,
          scroller: true,
          columns: [
            { data: "algorithm" },
            { data: "rand_setting" },
            { data: "MSE" },
            { data: "R^2" },
            { data: "Pearson" },
            { data: "R^2: normalized" },
            { data: "Pearson: normalized" },
            { data: "RMSE" },
            { data: "MAE" },
            { data: "Spearman" },
            { data: "Kendall" },
            { data: "Spearman: normalized" },
            { data: "Kendall: normalized" },
          ],
        });

        // Initialize the cell line table
        $("#clTable").DataTable({
          ajax: "html_tables/table_cell_line_LPO.json",
          processing: true,
          deferRender: true,
          paging: true,
          pageLength: 50,
          scrollY: "500px",
          scrollCollapse: true,
          scroller: true,
          columns: [
            { data: "algorithm" },
            { data: "rand_setting" },
            { data: "cell_line" },
            { data: "cellosaurus_id" },
            { data: "MSE" },
            { data: "R^2" },
            { data: "Pearson" },
            { data: "RMSE" },
            { data: "MAE" },
            { data: "Spearman" },
            { data: "Kendall" },
          ],
        });

        // Initialize the drug table
        $("#drugTable").DataTable({
          ajax: "html_tables/table_drug_LPO.json",
          processing: true,
          deferRender: true,
          paging: true,
          pageLength: 50,
          scrollY: "500px",
          scrollCollapse: true,
          scroller: true,
          columns: [
            { data: "algorithm" },
            { data: "rand_setting" },
            { data: "drug" },
            { data: "drug_name" },
            { data: "MSE" },
            { data: "R^2" },
            { data: "Pearson" },
            { data: "RMSE" },
            { data: "MAE" },
            { data: "Spearman" },
            { data: "Kendall" },
          ],
        });
      });
    </script>
    <style>
      body {
        font-family: Avenir, sans-serif;
      }
      object {
        width: 80%;
        height: auto;
      }
      html,
      body,
      iframe {
        height: 100%;
      }

      ul {
        list-style-type: none;
      }

      li {
        padding: 5px;
      }

      .sidenav {
        width: 200px;
        position: fixed;
        z-index: 1;
        top: 20px;
        left: 10px;
        background: #eee;
        overflow-x: hidden;
        padding: 8px 0;
      }

      .sidenav a {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        font-size: 20px;
        color: #2196f3;
        display: block;
      }

      .sidenav a:hover {
        color: #0645ad;
      }

      .main {
        height: 100%;
        margin-left: 220px;
        font-size: 16px;
        padding: 0px 10px;
      }

      @media screen and (max-height: 450px) {
        .sidenav {
          padding-top: 15px;
        }

        .sidenav a {
          font-size: 18px;
        }
      }

      .button {
        font: 12px Avenir;
        text-decoration: none;
        background-color: DodgerBlue;
        color: white;
        padding: 2px 6px 2px 6px;
      }
    </style>
  </head>
  <body>
    <div class="sidenav">
      <img
        src="favicon.png"
        width="100px"
        height="100px"
        alt="Logo"
        style="margin-left: auto; margin-right: auto; display: block"
      />
      <a href="#violin">Violin Plot</a>
      <a href="#heatmap">Heatmaps</a>
      <a href="#regression_plots">Regression plots: True vs. Predicted</a>
      <a href="#corr_comp">Correlation comparison</a>
      <a
        href="#corr_comp_drug"
        style="font-size: 14px; padding: 6px 8px 6px 26px"
        >Correlation comparison per drug</a
      >
      <a
        href="#corr_comp_cls"
        style="font-size: 14px; padding: 6px 8px 6px 26px"
        >Correlation comparison per cell line</a
      >
      <a href="#tables">Tables</a>
    </div>

    <div class="main">
      <img
        src="nf-core-drugresponseeval_logo_light.png"
        width="364px"
        height="100px"
        alt="Logo"
      />
    </div>
  </body>
</html>
